실용주의 개발 교육
Youngrok Pak
개요
예제와 같은 미니 쇼핑몰을 개발해본다. Django Admin을 통해서 쇼핑몰 컨텐츠를 등록하면, 웹페이지에서 컨텐츠를 전시하고, 사용자가 구매하고, 댓글을 달 수 있게 한다.
기능 목록
- 회원가입 / 로그인
- 상품 목록 보기
- 상품 상세 내역 보기
- 구매하기
- 구매내역 보기
- 댓글
학습하게 되는 기술
- HTML / CSS 기초
- Python 기초
- Django 사용법
- Bootstrap 활용
- 버전 관리
1단계 : 개발환경 준비에서 Hello World까지
개발 보조도구 설치
파이썬 & Django
sudo easy_install pip sudo pip install ipython readline sudo pip install django
작업할 디렉토리
mkdir workspace cd workspce
Django 프로젝트 시작하기
django-admin.py startproject minishop cd minishop chmod +x manage.py ./manage.py startapp shopping ./manage.py runserver
IPython 갖고 놀기
./manage.py shell
파이썬 모듈 찾기
>>> import dja[tab] >>> import django.[tab] >>> import django.short[tab]
Hello World 텍스트로 응답하기
urls.py
urlpatterns = patterns('',
url(r'^$', 'shopping.views.index'),
)
views.py
def index(request):
return HttpResponse('Hello World')
Hello World HTML 템플릿으로 응답하기
views.py
def index(request):
return render_to_response('index.html', locals())
settings.py
INSTALLED_APPS = ( 'shopping',
templates/index.html
<html> <head> </head> <body> Hello World </body> </html>
2단계 : 화면 구성하기
HTML 기초
- h1~h6
- a
- p
- div
- table
- ul, ol, li
https://github.com/youngrok/minishop/commit/d72f9a6b57c431702cc3d485bc292a96c947d608
CSS 기초
- font, color
- inline/block element
- content flows, float
- box model
- css file, style tag
https://github.com/youngrok/minishop/commit/f9bd78f2beb3b11809d38aa4b053390dffe1c8ed
https://github.com/youngrok/minishop/commit/7cdb60b5255fb2e8d63b2c5fc7253cc6ace9fd46
The Fancy UI 따라하기
https://github.com/youngrok/minishop/commit/df7b2afda7d0de9083ffcd911e9d5db6c171aca2
- 네비게이션 바
- 상품 사진
- 상품 이름
- grid 배열
3단계 : 데이터 다루기
상품 데이터 설계
class Product(models.Model): name = models.CharField(max_length=200) image = models.URLField() price = models.IntegerField() description = models.TextField()
sqlite3 데이터베이스
./manage.py syncdb ./manage.py dbshell >>> .tables >>> .schema shopping_product
상품 데이터 입력해보기
./manage.py shell >>> from shopping.models import Product >>> Product >>> Product.objects.all() >>> Product.objects.create(name='Black Playing Cards by Alexander Wang', image='http://cf1.thefancy.com/310/20120214/289415035_d6469f2993ad.jpg', price=65) >>> Product.objects.all() ./manage.py dbshell >>> select * from shopping_product;
Django admin
https://github.com/youngrok/minishop/commit/5e4400764d725ec71d283327916cd1b2a0fee4c7
Django admin 접속
상품 실제 데이터 보여주기
https://github.com/youngrok/minishop/commit/17e911916bacc828714debdeaad1e072176fec2a
- views.py에서 상품 목록 가져오기
- Django Template
- index.html에서 가짜 데이터 대신 실제 데이터 보여주기
상품 상세화면
https://github.com/youngrok/minishop/commit/32ff32a5d602890a11580c266d9214378e2d9f91
- 상세화면 URL 등록: 정규식으로 상품 번호 받기
- 상품번호로 상품 정보 가져오기
- 상품 사진, 이름, 설명 보여주기
- 구매 버튼
템플릿의 중복된 코드
https://github.com/youngrok/minishop/commit/3aa2ae288e4044b8c2da0d4ab7b3c10a7adc96ca
- django template의 상속 기능
- 레이아웃 페이지 선언
- index.html, show.html에도 적용
로그인
- 구매 기능 버튼(Favorite 버튼) URL 등록
- views.py에 favorite 등록. 간단하게 'Favorite'이라고 출력
- Django admin을 사용하는 과정에서 로그인이 되어 있었다면 로그아웃 http://localhost:8000/admin/logout/
- @login_required
- Favorite 기능을 실행하려면 사용자가 로그인되어 있어야 한다. 로그인이 안되어 있으면 로그인 페이지로 보낸다.
- 로그인 페이지는 username과 password를 받는다.
- /accounts/authenticate 만들기
- admin 계정으로 로그인 해본다.
- 로그인 정보를 화면 우상단에 표시
- 로그인이 완료되면 원래 페이지로 보낸다.
- Django admin에서 계정을 추가하고 로그아웃 한 후 만든 계정으로 로그인해본다.
- 회원가입 기능은 생략. https://docs.djangoproject.com/en/1.5/topics/auth/default/ 참조
구매
- 구매 데이터 저장
- 구매 목록 보여주기
댓글
- 댓글 입력 UI
- 댓글 저장
- 댓글 보여주기